<template>
  <div class="container">
    <div class="tag-list" :style="{ left: mainStore.SiderLength }">
      <el-tag
        v-for="(tag, index) in TagList"
        :key="tag.path"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
        class="tag flex-nowrap"
        style="min-width: 100px"
        :class="{ active: tag.path === currenPath }"
        @click="tagClick(tag.path, index)"
      >
        {{ tag.title }}
      </el-tag>
    </div>
    <span class="dropDown">
      <el-dropdown @command="handleClear">
        <span class="el-dropdown-link">
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="clearOther">关闭其它</el-dropdown-item>
            <el-dropdown-item command="clearAll">全部关闭</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </span>
  </div>
</template>

<script  setup>
import { useTagList } from '@/composible/TagList'
const {mainStore,
         currenPath,
         TagList,
         tagClick,
            handleClose,
            handleClear,
             addTabs} = useTagList();

</script>

<style scoped lang="less">
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  .dropDown {
    position: fixed;
    right: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 200;
  }
}

.tag-list {
  position: fixed;
  top: 60px;
  right: 30px;
  display: flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  z-index: 100;
  overflow-x: auto;
  @apply bg-gray-200;
  margin-left: 20px;
}

.tag-list::-webkit-scrollbar {
  width: 0px;
}
.tag {
  width: 100px;
  height: 40px;
  @apply bg-gray-400 text-light-100 rounded mr-4;
  font-size: 16px;
}

.active {
  @apply bg-light-200 text-blue-500;
}
</style>